<script setup>
import { ref, computed, watch } from 'vue'
import { darkTheme } from 'naive-ui'
import { useMainStore } from './pinia.js'
import HeaderBar from './components/HeaderBar.vue'
import { DocumentText, Help, Code, Server, Person, Refresh } from '@vicons/ionicons5'
import BuildLogic from './pages/BuildLogic.vue'
import FileProcessor from './pages/FileProcessor.vue'
import OrderUpdateTest from './pages/OrderUpdateTest.vue'
import UserGuide from './pages/UserGuide.vue'
import DffTest from './pages/DffTest.vue'
import CacheManagement from './pages/CacheManagement.vue'
import UserManagement from './components/UserManagement.vue'

import PrintMessage from './components/PrintMessage.vue'

const store = useMainStore()
const messageRef = ref(null)
const currentTab = ref('file-processor')

const printMessage = (type, msg, option) => {
  messageRef.value.message[type](msg, option)
}

const theme = computed(() => store.isDarkTheme ? darkTheme : null)

// 主题覆盖配置
const themeOverrides = computed(() => {
  if (store.isDarkTheme) {
    return {
      Tooltip: {
        color: '#2a2a2a',
        textColor: '#e8e8e8',
        borderRadius: '6px'
      }
    }
  } else {
    return {
      Tooltip: {
        color: '#ffffff',
        textColor: '#333333',
        borderRadius: '6px'
      }
    }
  }
})

// 监听主题变化，动态添加/移除 body 的 dark 类
watch(() => store.isDarkTheme, (isDark) => {
  if (isDark) {
    document.body.classList.add('dark')
  } else {
    document.body.classList.remove('dark')
  }
}, { immediate: true })

// 可用标签页（合并导航与内容）
  const availableTabs = computed(() => {
    const tabs = [
      { key: 'file-processor', label: '文件处理', icon: DocumentText },
      { key: 'user-guide', label: '使用说明', icon: Help }
    ]
    if (store.isAdmin) {
      tabs.push({ key: 'order-update-test', label: '更新API测试', icon: Refresh })
      tabs.push({ key: 'cache-management', label: '系统缓存管理', icon: Server })
    }
    if (store.canAccessAdminFeatures) {
      tabs.push({ key: 'user-management', label: '用户权限管理', icon: Person })
    }
    if (store.canAccessDffTest) {
      tabs.push({ key: 'dff-test', label: 'DFF API测试', icon: Code })
    }
    if (store.isSystemAdmin) {
      tabs.push({ key: 'build-logic', label: '构建逻辑说明', icon: Help })
    }
    return tabs
  })

  const tabComponents = {
    'file-processor': FileProcessor,
    'user-guide': UserGuide,
    'order-update-test': OrderUpdateTest,
    'dff-test': DffTest,
    'cache-management': CacheManagement,
    'user-management': UserManagement,
    'build-logic': BuildLogic
  }
</script>

<template>
  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
    <n-message-provider :max="5" container-style="white-space: pre-wrap">
      <n-dialog-provider>
        <HeaderBar @message="printMessage" />
        <div class="main-content">
          <n-card class="nav-content-card" :bordered="false">
            <n-tabs v-model:value="currentTab" type="line" animated class="nav-tabs-merged">
              <n-tab-pane v-for="tab in availableTabs" :key="tab.key" :name="tab.key" :tab="tab.label">
                <template #tab>
                  <n-space align="center" :size="6">
                    <n-icon size="16">
                      <component :is="tab.icon" />
                    </n-icon>
                    {{ tab.label }}
                  </n-space>
                </template>
                <component :is="tabComponents[tab.key]" @message="printMessage" />
              </n-tab-pane>
            </n-tabs>
          </n-card>
        </div>
        <PrintMessage ref="messageRef"/>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<style lang="stylus">
body
  margin: 0
  padding: 0
  background: #f8f9fa
  min-height: 100vh
  transition: background-color 0.3s ease

// 深色主题样式
body.dark
  background: #1a1a1a

.main-content
  width: 60%
  margin: 80px auto 0 auto
  padding: 16px 12px
  min-height: calc(100vh - 70px)
  transition: background-color 0.3s ease

@media (max-width: 1280px)
  .main-content
    width: 86%

@media (max-width: 768px)
  .main-content
    width: 95%
    margin: 64px auto 0 auto
    padding: 12px 8px

// 深色主题下的主内容区域
.dark .main-content
  background: transparent

.nav-content-card
  :deep(.n-tabs-nav)
    padding: 0 4px
  :deep(.n-tab)
    padding: 6px 10px
  :deep(.n-tabs-tab__label)
    font-weight: 500
    font-size: 13px
</style>
